<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:af="http://myfaces.apache.org/trinidad"
	xmlns:afh="http://myfaces.apache.org/trinidad/html">
	
	<style type="text/css">
	    .diagram { height: 75px; width:225px; position:relative; }
	    .diagramcol { position: absolute; height: 100%; }
        .priorityTextColumn { left: 0px; width: 65px; }
        .highPriorityColumn { left: 65px; width: 55px; }
        .normalPriorityColumn { left: 120px; width: 55px; }
        .lowPriorityColumn { left: 175px; width: 55px; }
	    .barheader { width: 100%; text-align: center; }
        .barheader span { padding: 0px; }
	    .barframe { position: absolute; width: 100%; height: 40px; }
	    .bar { position: absolute; width: 25px; left: 15px; bottom:0%; font-size: 1px; }
        .barfooter { position: absolute; width: 100%; top: 55px; padding-top: 2px; text-align: center; }
        .barfooter span { padding: 0px; }
        .zeroBar { border-bottom: 1px solid; }
    </style>
  
    <div class="diagram">
        <div class="diagramcol priorityTextColumn">
        	<af:outputText value="#{commonMsg.priority}:" 
                styleClass="barfooter af|inputText::label" />
        </div>

        <div class="diagramcol highPriorityColumn">
            <div class="barheader">
                <af:outputText value="#{priorityData.highPriorityCount}" 
                	styleClass="af|inputText::label"/>
            </div>
            <div class="barframe">
                <div class="bar #{barColorClass} #{priorityData.highPriorityHeight lt 2  ? 'zeroBar' : ''}" 
                	style="height: #{priorityData.highPriorityHeight}%;"></div>
            </div>
            <div class="barfooter">
                <af:outputText value="1" styleClass="af|inputText::label" 
                    converter="priorityConverter"/>
            </div>
        </div>

        <div class="diagramcol normalPriorityColumn">
            <div class="barheader">
                <af:outputText value="#{priorityData.normalPriorityCount}" 
                	styleClass="af|inputText::label"/>
            </div>
            <div class="barframe">
                <div class="bar #{barColorClass} #{priorityData.normalPriorityHeight lt 2  ? 'zeroBar' : ''}" 
                    style="height: #{priorityData.normalPriorityHeight}%;"></div>
            </div>
            <div class="barfooter">
                <af:outputText value="0" styleClass="af|inputText::label" 
                    converter="priorityConverter"/>
            </div>
        </div>

        <div class="diagramcol lowPriorityColumn">
            <div class="barheader">
                <af:outputText value="#{priorityData.lowPriorityCount}" 
                	styleClass="af|inputText::label"/>
            </div>
            <div class="barframe">
           		<div class="bar #{barColorClass} #{priorityData.lowPriorityHeight lt 2  ? 'zeroBar' : ''}" 
                    style="height: #{priorityData.lowPriorityHeight}%;"></div>
            </div>
            <div class="barfooter">
                <af:outputText value="-1" styleClass="af|inputText::label" 
                    converter="priorityConverter"/>
            </div>
        </div>
    </div>
</ui:composition>